Angular Material এ রেঞ্জ স্লাইডার তৈরি করা খুবই সহজ এবং এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। রেঞ্জ স্লাইডার সাধারণত দুটি মানের মধ্যে একটি মান নির্বাচন করতে ব্যবহৃত হয়, যেমন—কম এবং বেশি। অ্যাঙ্গুলার ম্যাটেরিয়াল mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়।

রেঞ্জ স্লাইডার তৈরি করার ধাপ

১. Angular Material মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে MatSliderModule মডিউলটি অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যাবে।

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  imports: [
    MatSliderModule
  ]
})
export class AppModule { }

২. HTML ফাইলে রেঞ্জ স্লাইডার ব্যবহার করা

mat-slider কম্পোনেন্ট ব্যবহার করে একটি রেঞ্জ স্লাইডার তৈরি করা যেতে পারে। এটি min, max, এবং step প্রপার্টি সহ কাস্টমাইজ করা যায়।

<mat-slider min="1" max="100" step="1" value="50"></mat-slider>

এখানে:

• min: স্লাইডারের সর্বনিম্ন মান
• max: স্লাইডারের সর্বোচ্চ মান
• step: স্লাইডারের প্রতিটি পদক্ষেপের মান
• value: ডিফল্ট মান, যা স্লাইডারের প্রাথমিক অবস্থান নির্ধারণ করে

৩. স্লাইডার মান ট্র্যাক করা

স্লাইডারের মান ট্র্যাক করার জন্য আপনি ngModel ডিরেকটিভ ব্যবহার করতে পারেন। এটি আপনাকে স্লাইডারের মান পরিবর্তন হলে তা আপনার টাইপস্ক্রিপ্ট ফাইলে ধারণ করতে সাহায্য করবে।

<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue"></mat-slider>
<p>Selected value: {{ sliderValue }}</p>

এখানে, [(ngModel)]="sliderValue" স্লাইডারের মান sliderValue নামক টাইপস্ক্রিপ্ট ফাইলে ধারণ করবে এবং প্যারাগ্রাফে প্রদর্শিত হবে।

৪. টাইপস্ক্রিপ্ট ফাইলে মান ডিফাইন করা

এখন, টাইপস্ক্রিপ্ট ফাইলে sliderValue নামক একটি ভেরিয়েবল ডিফাইন করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-slider-example',
  templateUrl: './slider-example.component.html',
  styleUrls: ['./slider-example.component.css']
})
export class SliderExampleComponent {
  sliderValue: number = 50;  // ডিফল্ট মান
}

এখন, আপনি যখন স্লাইডারটি হেলানো হবে, তখন sliderValue এর মান পরিবর্তিত হবে এবং তা HTML এ প্রদর্শিত হবে।

রেঞ্জ স্লাইডার কাস্টমাইজেশন

১. স্লাইডার স্টাইলিং

Angular Material এর রেঞ্জ স্লাইডারকে কাস্টমাইজ করার জন্য CSS ব্যবহার করা যায়। আপনি স্লাইডারের থাম্ব, ট্র্যাক এবং অন্যান্য অংশ স্টাইল করতে পারেন।

mat-slider {
  width: 100%;
}

.mat-slider-thumb {
  background-color: #4caf50; /* থাম্বের রং পরিবর্তন */
}

.mat-slider-track-fill {
  background-color: #3f51b5; /* ট্র্যাকের পূর্ণ অংশের রং */
}

২. ডিসেবল স্লাইডার

আপনি চাইলে স্লাইডারটি ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেটি ইন্টারঅ্যাক্ট করতে না পারে।

<mat-slider min="1" max="100" step="1" value="50" disabled></mat-slider>

৩. ডিসক্রিট স্লাইডার (Discrete Slider)

ডিসক্রিট স্লাইডার ব্যবহার করলে স্লাইডারটি নির্দিষ্ট মানের মধ্যে সীমাবদ্ধ থাকবে, এবং এটি মানের মধ্যে কেবল নির্দিষ্ট কদমে পরিবর্তিত হবে। এটি tickInterval প্রপার্টি দ্বারা কনফিগার করা যায়।

<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue" tickInterval="10"></mat-slider>

এখানে tickInterval="10" স্লাইডারের প্রতি দশমিক পরিমাণে মান পরিবর্তন করবে।

৪. Vertical Slider (আনুভূমিক পরিবর্তে উল্লম্ব স্লাইডার)

ডিফল্টভাবে, Angular Material এর স্লাইডার হরিজেন্টাল (আনুভূমিক) থাকে। তবে আপনি চাইলে স্লাইডারটি উল্লম্বও করতে পারেন।

<mat-slider min="1" max="100" step="1" value="50" vertical></mat-slider>

এটি স্লাইডারটি উল্লম্বভাবে দেখাবে, যা ব্যবহারকারীকে উপর থেকে নিচে স্লাইড করতে সক্ষম করবে।

Angular Material এর mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়, যা ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। আপনি এটি বিভিন্ন কাস্টমাইজেশন অপশন যেমন min, max, step, tickInterval, এবং vertical প্রপার্টি ব্যবহার করে কাস্টমাইজ করতে পারেন। এটি আপনার অ্যাপ্লিকেশনে আরও ইউজার ফ্রেন্ডলি এবং ইন্টারেক্টিভ ইন্টারফেস তৈরি করতে সাহায্য করবে।